<template>
  <div class="footer">
    <div class="top">
      <div class="link">
        <h4>公司概况</h4>
        <ul>
          <li @click="$router.push('/companyProfile')">关于我们</li>
          <!-- <li @click="$router.push('/companyProfile/contact')">联系我们</li> -->
        </ul>
      </div>
      <div class="link">
        <h4>法律条款</h4>
        <ul>
          <li @click="$router.push('/legalProvisions/userAgreement')">用户协议</li>
          <li @click="$router.push('/legalProvisions/privacy')">隐私协议</li>
          <!-- <li>支付协议</li>
          <li>法律声明</li> -->
        </ul>
      </div>
      <div class="link" style="width: 180px">
        <h4>友情链接</h4>
        <ul>
          <li>
            <a href="https://www.cdpf.org.cn/" target="_block"
              >中国残疾人联合会</a
            >
          </li>
          <li>
            <a href="http://www.hxph.com.cn/" target="_block">华夏出版社</a>
          </li>
          <li>
            <a href="https://www.hxclass.cn/" target="_block">华夏云课堂</a>
          </li>
          <li>
            <a href="https://hxyuandao.com/" target="_block">北京华夏元道文化科技有限公司</a>
          </li>
        </ul>
      </div>
      <div class="contact">
        <div>
          <a-icon type="phone" style="margin: 0 13px 0 0" />
          <span>010-84504771</span>
        </div>
        <div style="margin-top: 18px">
          <a-icon type="mail" style="margin: 0 13px 0 0" />
          <span>cdpservice@hxph.com.cn</span>
        </div>
      </div>
      <div class="images">
        <div>
          <img src="@/assets/image/code2.png" alt="二维码" />
          <div>"爱心阳光"</div>
          <div>公众号</div>
        </div>
        <div>
          <img src="@/assets/image/code.jpg" alt="二维码" />
          <div>"爱心阳光"</div>
          <div>移动端</div>
        </div>

      </div>
    </div>
    <div class="bottom">
      <ul>
        <li>指导单位：中国残疾人联合会宣传文化部  </li>
        <li>发起单位：华夏出版社 中国残疾人事业新闻宣传促进会</li>
        <li>技术支持：北京华夏元道文化科技有限公司</li>
      </ul>
      <ul style="margin-top: 8px">
        <li><a style="color: #cccccc;" target="_blank" href="https://beian.miit.gov.cn/">京ICP备20025144号-5</a></li>
        <li>
           <img class="recordNo" src="@/assets/image/recordNo.png" alt="">
           <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102005782" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;color:#cccccc;">京公网安备 11010102005782号</p></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style scoped lang="less">
.footer {
  color: #ccc;
  background-color: #363438;
  .top {
    width: 1200px;
    display: flex;
    padding: 40px 0 0;
    margin: 0 auto;
    height: 210px;
    div {
      flex: 1;
      &.link {
        width: 140px;
        flex: none;
      }
      &.images {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        > div {
          width: 130px;
          display: flex;
          flex-direction: column;
          font-size: 12px;
          line-height: 17px;
          text-align: center;
          flex: none;
          img {
            width: 80px;
            margin: 0 auto;
            margin-bottom: 8px;
            display: block;
          }
          div {
            flex: none;
          }
        }
      }
      h4 {
        font-size: 14px;
        line-height: 20px;
        color: #fff;
        margin-bottom: 12px;
      }
      ul {
        line-height: 17px;
        font-size: 12px;
        li {
          padding: 4px 0;
          cursor: pointer;
          a {
            color: #ccc;
            margin: 0;
          }
        }
      }
    }
  }
  .bottom {
    background-color: #242226;
    min-width: 1200px;
    height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    ul {
      font-weight: 400;
      font-size: 12px;
      display: flex;
      justify-content: center;
      li {
        padding: 0 20px;
        line-height: 17px;
        height: 17px;
        .recordNo{
          margin-top: -20px;
        }
      }
    }
  }
}
</style>
